@extends('admin.layouts.app')
@section('css')

@endsection
@section('content')

                        <!-- Page-Title -->
                       
                        
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-box">
                            <h2 class="m-t-0 header-title">Edit Map Coordinate</h2>
                            <hr/>
                             
    @include('admin.common.error')
    <div class="row">
             <div class="col-md-6">
        <form class="form-horizontal" role="form" action="{{url('zadmin/points/'.$data->id)}}" method="post" enctype="multipart/form-data">
                {{ method_field('PUT') }}
          <div class="form-group">
          <label class="col-md-2 control-label">Name</label>
          <div class="col-md-10">
          <input type="text" class="form-control" name="name" required="" value="{{$data->name}}"  autocomplete="off">
                                                  </div>
                                              </div>
          <div class="form-group">
              <label class="col-md-2 control-label" for="example-email">Coordinate</label>
                <div class="col-md-10">
                <input type="text" id="lnglat"  name="lnglat" class="form-control" value="{{$data->lnglat}}"  />
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-2 control-label" for="example-email">Remark</label>
                <div class="col-md-10">
                <input type="text"  name="remark" class="form-control" value="{{$data->remark}}"  />
              </div>
            </div>
                                                
            <div class="form-group">
              <label class="col-md-2 control-label" for="example-email">Duration</label>
                <div class="col-md-10">
                  <input type="text"  name="duration" class="form-control" value="{{$data->duration}}" placeholder="Minutes" autocomplete="off" >
                </div>
              </div>
            

           
           

           
           
            
          


            

            





                <div class="form-group text-center">
                  <button type="submit" class="btn btn-info waves-effect waves-light">Submit</button>

                  <a href="{{url('zadmin/points')}}" class="btn btn-warning waves-effect waves-light">Cancel</a>
                </div>
                                              
                  <input type="hidden" name="id" value="{{$data->id}}" />                            
                             {{csrf_field()}}
              </form>
                                </div>

                <div class="col-md-6">
                 <!--  <div id="map" style="height: 500px;">
      
                  </div> -->
                </div>               
                                        
               </div>            
                                    
                                    
      </div>
                                
      </div> <!-- end col -->

                            
                        </div>
@endsection

   @section('js')                 

       
       <script type="text/javascript">
        var map,markers = [];;
      function initMap() 
      {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -37.8134183, lng: 144.9612273},
          zoom: 11
        });

     
        var lnglat = '{{$data->lnglat}}'.split(',');
        var lat    = Number(lnglat[1]);
        var lng    = Number(lnglat[0]);
        var point = {lat:lat,lng:lng};
         console.info(point);
        addMarker(point);


        google.maps.event.addListener(map, "click", function (event) {
          deleteMarkers();
          var latitude = event.latLng.lat();
          var longitude = event.latLng.lng();
          
          var p = {lat:latitude,lng:longitude};
          $('#lnglat').val(longitude+','+latitude);
          addMarker(p);
        }); //end addListener
      
        
      }



      function addMarker(lnglat)
      {
        
        var marker = new google.maps.Marker({
          position: lnglat,
          map: map,
          //title: 'Hello World!'
        });

        markers.push(marker);
      }

      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }


      function clearMarkers()
      {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers()
      {
        setMapOnAll(map);
      }

      function deleteMarkers()
      {
        clearMarkers();
        markers = [];
      }
     
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvV2Y133IAiy0BQcY4zcLM2bQ_44I2dJ0&callback=initMap"
    async defer></script>

       

        
    
    

    
    
  @endsection    